import {Link} from "react-router-dom"
import {useQuery, useMutation, useQueryClient} from "@tanstack/reatc-query"
import {toast} from "react-hot-toast"

import LoadingSpinner from "../../components/common/LoadingSpinner"

import {IsSettingsOutline } from "react-icons/io5"
import {FaUser} from "react-icons/fa"
import {FaHeart} from "react-icons/fa6"

const NotificationPage = () => {
    const qeueryClient = useQueryClient()
    const {data: notifications, isLoading} = useQuery({
        queryKey: ["notifications"],
        queryFn: async () => {
            try {
                const res = await fetch("/api/notifications")
                const data = await res.json()
                if (!res.ok) {
                    throw new Error(data.error || "Something went wrong")
                }
                return data
            }catch(error) {
                throw new Error("Error in NotificationPage.jsx: " + error)
            }
        }
    })

    const {mutate: deleteNotifications} = useMutation({
        mutationFn: async () => {
            try {
                const res = await fetch("/api/notifications", {
                    method: "DELETE",
                })
                const data = await res.json()

                if (!res.ok) {
                    throw new Error(data.error || "Something went wrong")
                }

                return data
            }catch(error) {
                throw new Error(`Error in ${__filename}: `+ error)
            }
        },

        onSuccess: () => {
            toast.success("Notifications deleted successfully")
            qeueryClient.invalidateQueries({queryKey: ["notifications"]})
        },

        onError: (error) => {
            toast.error(error.message)
        }
    })
    // TODO: fix this comp
    return (
        <div>

        </div>
    )
}

export default NotificationPage